<template>
	<xn-form-container
		:title="formData.id ? '编辑' : '增加'"
		:width="400"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" layout="vertical">
			<a-form-item label="产品名称" name="productCode">
				<a-select
					v-model:value="formData.productCode"
					placeholder="请选择产品"
					:options="props.productList"
					@change="changeProduct"
				/>
			</a-form-item>
			<a-form-item label="当前月份" name="currentMonth">
				<a-date-picker
					style="width: 100%"
					v-model:value="formData.currentMonth"
					picker="month"
					allow-clear
					valueFormat="YYYY-MM"
					@change="dateChange"
				/>
			</a-form-item>
			<a-form-picker>
				<a-upload-dragger
					ref="uploadRef"
					:before-upload="handleBeforeUpload"
					v-model:file-list="formData.fileList"
					:show-upload-list="true"
					:headers="headers"
					accept=".xlsx, .xls, .csv"
					:auto-upload="false"
					multiple
				>
					<p class="ant-upload-drag-icon">
						<inbox-outlined></inbox-outlined>
					</p>
					<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
					<p class="ant-upload-hint">支持单个上传</p>
				</a-upload-dragger>
			</a-form-picker>
		</a-form>

		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup>
	import bizSmsWhiteListApi from '@/api/biz/bizSmsWhiteListApi.js'
	import productApi from '@/api/tjzy/product/productApi'
	import tool from '@/utils/tool'

	// ===========================================DATA======================================================
	const props = defineProps({
		productList: {
			type: Array,
			default: () => []
		}
	})

	// 默认是关闭状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	let uploadRef = ref()
	const headers = ref({
		token: tool.data.get('TOKEN')
	})
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	// ===========================================METHODS==================================================
	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			formData.value = Object.assign({}, record)
		} else {
			formData.value = {
				productName: null,
				productCode: null,
				currentMonth: null,
				fileList: []
			}
		}
	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		visible.value = false
	}
	// 验证并提交数据
	const onSubmit = () => {
		const multiFormData = new FormData()
		const jsonData = {
			productCode: formData.value.productCode,
			productName: formData.value.productName,
			currentMonth: formData.value.currentMonth
		}
		// console.log('jsonData', jsonData)
		multiFormData.append('importBo', new Blob([JSON.stringify(jsonData)], { type: 'application/json' }))

		if (formData.value.fileList) {
			multiFormData.append(
				'multipartFile',
				new Blob([formData.value.fileList[0].originFileObj]),
				formData.value.fileList[0].originFileObj.name
			)
		}

		bizSmsWhiteListApi.importExcel(multiFormData).then(() => {
			onClose()
			emit('successful')
		})

		// formRef.value
		// 	.validate()
		// 	.then(() => {
		// 		bizSmsWhiteListApi.addOrEdit(formData.value).then(() => {
		// 			onClose()
		// 			emit('successful')
		// 		})
		// 	})
		// 	.catch(() => {})
	}
	const handleBeforeUpload = () => {
		return false
	}

	const changeProduct = (value) => {
		formData.value.productName = props.productList.find((item) => item.value === value).label
	}
	// ===========================================REQUEST==================================================
	// ===========================================OTHER==================================================
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
